var vm = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'], // 修改vue模板符号，防止与django冲突
    data: {
        host: host,
        username: sessionStorage.username || localStorage.username,
        user_id: sessionStorage.user_id || localStorage.user_id,
        avatar_url: sessionStorage.avatar_url || localStorage.avatar_url,
        token: sessionStorage.token || localStorage.token,
        nick_name: sessionStorage.nick_name || localStorage.nick_name,
        page: 1, // 当前页数
        page_size: 10, // 每页数量
        count: 0,  // 总数量

        spits: [], //吐槽列表数据
        spit_id: -1, // 点击的吐槽的id

        tucaos: '',
        query: '',  //查询关键字

    },
    computed: {
        total_page: function () {  // 总页数
            return Math.ceil(this.count / this.page_size);
        },
        next: function () {  // 下一页
            if (this.page >= this.total_page) {
                return 0;
            } else {
                return this.page + 1;
            }
        },
        previous: function () {  // 上一页
            if (this.page <= 0) {
                return 0;
            } else {
                return this.page - 1;
            }
        },
        page_nums: function () {  // 页码
            // 分页页数显示计算
            // 1.如果总页数<=5
            // 2.如果当前页是前3页
            // 3.如果当前页是后3页,
            // 4.既不是前3页，也不是后3页
            var nums = [];
            if (this.total_page <= 5) {
                for (var i = 1; i <= this.total_page; i++) {
                    nums.push(i);
                }
            } else if (this.page <= 3) {
                nums = [1, 2, 3, 4, 5];
            } else if (this.total_page - this.page <= 2) {
                for (var i = this.total_page; i > this.total_page - 5; i--) {
                    nums.push(i);
                }
            } else {
                for (var i = this.page - 2; i < this.page + 3; i++) {
                    nums.push(i);
                }
            }
            return nums;
        }
    },
    mounted: function () {
        this.get_spits();


        this.get_search_result()

    },

    methods: {
        logout: function () {
            sessionStorage.clear();
            localStorage.clear();
            location.href = './person-loginsign.html';
        },
        // 获取url路径参数
        get_query_string: function (name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            return null;
        },

        // 点击页数
        on_page: function (num) {
            if (num != this.page) {
                this.page = num;
                this.get_spits();
            }
        },
        // 点击排序
        on_sort: function (ordering) {
            if (ordering != this.ordering) {
                this.page = 1;
                this.ordering = ordering;
                this.get_spits();
            }
        },
        // 请求吐槽数据
        get_spits: function () {
            axios.get(this.host + '/tucaos/', {
                params: {
                    page: this.page,
                    page_size: this.page_size,
                },
                headers: {
                    // 后台接收的JWT对格式有要求,'JWT'开头,空一格拼接字符串
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json'
            })
                .then(response => {
                    // 保存总数量,用于计算页数
                    this.count = response.data.count;
                    this.spits = response.data.results;
                    // console.log(this.spits);
                    // console.log(this.spits[0].collect);

                })
                .catch(error => {
                    console.log(error.response.data);
                })
        },

        // 点赞与取消点赞
        spit_follow: function (spit_id, spit_follow) {


            if (this.user_id) {
                axios.post(this.host + '/tucaos/follows/', {
                    tucao_id: spit_id,
                    // action: (this.spit_follow_flag.includes(spit_id))?"unfollow":"follow",
                    action: (spit_follow) ? "unfollow" : "follow",
                }, {
                    // 向后端传递JWT token的方法
                    headers: {
                        // 后台接收的JWT对格式有要求,'JWT'开头,空一格拼接字符串
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                    // withCredentials:true
                })
                    .then(response => {

                        console.log(response.data);
                        // console.log(this.spit_id);
                        // location.href = './spit-index.html'
                        // 刷新数据
                        this.get_spits();

                    })
                    .catch(error => {
                        if (error.response.status == 400) {
                            // alert(error.response.data);
                            console.log(error.response.data)
                        } else {
                            console.log(error.response.data);
                        }
                    })
            } else {
                location.href = './person-loginsign.html';
            }


        },

        // 收藏与取消收藏
        spit_collect: function (spit_id, spit_Collect) {

            if (this.user_id) {
                axios.post(this.host + '/tucaos/collections/', {
                    tucao_id: spit_id,
                    // action: (this.spit_collect_flag.includes(spit_id))?"uncollect":"collect",
                    action: (spit_Collect) ? "uncollect" : "collect",
                }, {
                    // 向后端传递JWT token的方法
                    headers: {
                        // 后台接收的JWT对格式有要求,'JWT'开头,空一格拼接字符串
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                    // withCredentials:true
                })
                    .then(response => {
                        console.log(response.data);
                        // location.href = './spit-index.html'
                        // 刷新数据
                        this.get_spits();

                    })
                    .catch(error => {
                        if (error.response.status == 400) {
                            // alert(error.response.data);
                            console.log(error.response.data)
                        } else {
                            console.log(error.response.data);
                        }
                    })
            } else {
                location.href = './person-loginsign.html';
            }
        },
        go_spit_detail: function (spit_id) {
            location.href = "./spit-detail.html?spit_id=" + spit_id + "&edit_comment_flag=" + "8";
        },

        get_search_result: function () {
            this.query = this.get_query_string('query');
            axios.get(this.host + '/tucaos/search/', {
                params: {
                    text: this.query,
                    page: this.page,
                    page_size: this.page_size,
                },
                responseType: 'json'
            })
                .then(response => {
                    this.count = response.data.count;
                    this.tucaos = response.data.results;
                    console.log(this.tucaos);
                    for (let i = 0; i < this.tucaos.length; i++) {
                        this.tucaos[i].url = '/tucaos/' + this.tucaos[i].id + ".html";
                    }
                    console.log(this.tucaos.create_time)
                });;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
            // .catch(error => {
            //     console.log(error.response.data);
            // })
        },
    }
});